<template>
  <div class="wrapper" :class="{'shadow': props.shadow}">
    <div class="header" v-if="slots.header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot></slot>
    </div>
    
    <div class="footer" v-if="slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  created() {
    // console.log(this.$slots);
    
  }
}
</script>

<script setup lang="ts">
import {useSlots} from 'vue'

const slots = useSlots()

console.log(slots);


const props = defineProps({
  shadow: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.wrapper {
  background: var(--Color_Bg_White);
  border-radius: .5625rem;
  margin-bottom: 1.25rem;
  padding: 0.625rem 1.25rem;
  transition: var(--transition-duration);
}

.header {
  padding: 0.625rem 0;
}

.footer {
  padding: 0.625rem 0;
}

.shadow {
  /* --box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12) */
  box-shadow: var(--box-shadow-light)
}
</style>